/*!
 * Copyright (c) 2018 10 29.
 * Author: yoonasy
 * Description: 全局样式写这
 */

.color-l {
  color: $color-l;
}

.color-d {
  color: $color-d;
}

.color-a {
  color: $color-a;
}

.color-ddel {
  color: $color-ddel;
}

.color-del {
  color: $color-del;
}


body {
  min-width: 1140px;
  background-color: #f2f2f2;
}

.clearfix:before, .clearfix:after{
  content: "";
  display: table;
  line-height: 0;
}

.clearfix:after{
  clear: both;
}

.color-popup-blue {
  color: #aee4fa;
}

.bg-master {
  background-color: $bg-master;
}
.bg-small {
  background-color: $bg-small;
}

// 公共样式
// ========
.tc {
  text-align: center;
}
.vm {
  vertical-align: middle;
}
.vb {
  vertical-align: baseline;
}
.v-bottom {
  vertical-align: bottom;
}
.hide {
  display: none !important;
}
.posHide {
  position: fixed;
  z-index: -9999999999;
  left: -9999999999px;
  top: -9999999999px;
}
.pointer {
  cursor: pointer;
}

.wrap1140 {
  width: 1140px;
  @include block-center;
}
.wrap1240 {
  width: 1240px;
  @include block-center;
}

.flex {
  @include flex;
}
.f1 {
  flex: 1;
}

.fr {
  float: right !important;
}
.fl {
  float: left !important;
}

.f12 {
  font-size: 12px;
}
.f14 {
  font-size: 14px;
}
.f16 {
  font-size: 16px;
}
.f18 {
  font-size: 18px;
}
.f20 {
  font-size: 20px;
}

.mt10 {
  margin-top: 10px;
}

.ml10 {
  margin-left: 10px;
}

.mb10 {
  margin-bottom: 10px;
}
.pt16 {
  padding-top: 16px;
}
.pb10 {
  padding-bottom: 10px;
}
.plr26 {
  padding-left: 26px;
  padding-right: 26px;
}
.mr6 {
  margin-right: 6px;
}


// 三角形
.g-arrow-down {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  border: {
    color: rgba(#000, .5) transparent transparent transparent;
    style: solid;
    width: 5px;
    bottom: 0;
  }
}


//  滚动条
// ==================
.custom-scroll {
  overflow: hidden;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  &::-webkit-scrollbar {
    width: 7px;
  }
  &::-webkit-scrollbar-thumb{  /*滑动滑块的背景颜色*/
    background: #D8D8D8;
    border-radius:4px;
  }
}


// 按钮
// ===================
.btn {
  display: inline-block;
  margin-bottom: 0;
  padding: 6px 12px;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  outline: 0;
  -webkit-appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: background-color .2s ease-out,border-color .2s ease-out;
  transition: background-color .2s ease-out,border-color .2s ease-out;
}

.btn-master1 {
  @include btn-mixin($color-a)
}
.btn-accent {
  @include btn-mixin($color-del)
}
.btn-red {
  @include btn-mixin($color-del);
  &, &:focus {
    color: $color-del !important;
    background-color: #fff;
  }
  &:hover {
    $c: darken($color-del, 10%);
    border-color: $c;
    background-color: $c;
    color: #fff !important;
  }
  &:active {
    $c: darken($color-del, 20%);
    border-color: $c;
    background-color: darken($color-del, 16%);
    box-shadow: 0 0 10px 0px lighten($color-del, 20%);
    color: #fff !important;
    -webkit-transition: box-shadow 200ms ease;
    -moz-transition: box-shadow 200ms ease;
    -ms-transition: box-shadow 200ms ease;
    -o-transition: box-shadow 200ms ease;
    transition: box-shadow 200ms ease;
  }
  &.btn-disabled, &.btn-disabled:hover, &.btn-disabled:active {
    $c: lighten($color-del, 15%);
    background-color: #fff !important;
    cursor: no-drop;
    border-color: $c !important;
    color: $c !important;
  }
}
.btn-danger {
  @include btn-mixin($color-del)
}
.btn-white {
  @include btn-mixin(#fff, #222, #dedede, #f0f0f0)
}
.btn-white-master {
  @include btn-mixin(#fff, #222, #dedede, #f0f0f0);
  $bg: $color-a;
  &:hover {
    $c: darken($bg, 10%);
    border-color: $c;
    background-color: $c;
    color: #fff!important;
  }
  &:active {
    $c: darken($bg, 20%);
    border-color: $c;
    background-color: darken($bg, 16%);
    color: #fff!important;
    box-shadow: 0 0 10px 0px lighten($bg, 20%);
    -webkit-transition: box-shadow 200ms ease;
    -moz-transition: box-shadow 200ms ease;
    -ms-transition: box-shadow 200ms ease;
    -o-transition: box-shadow 200ms ease;
    transition: box-shadow 200ms ease;
  }
  &.btn-disabled, &.btn-disabled:hover, &.btn-disabled:active {
    $c: lighten($bg, 15%);
    background-color: #fff !important;
    cursor: no-drop;
    border-color: #dedede !important;
    color: #ccc !important;
  }
}
.btn-gray {
  @include btn-mixin(#f1f1f1)
}
.btn-disabled {
  cursor: no-drop;
}

// 完美居中
.perfect-center {
  display: flex;
  justify-content: center;
  align-items: Center;
}

// 左右排列
.between {
  display: flex;
  justify-content: space-between;
}
.between-ic {
  @extend .between;
  align-items: center;
}
// 左右排列 item也居中
.between-ic {
  @extend .between;
  align-items: center;
}

// 垂直居中
.vertical-center {
  display: flex;
  align-items: Center;
}

// 水平居中
.align-center {
  display: flex;
  justify-content: center;
}

// 单行文本溢出
.text-overflow-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
// 弹出提示框居中处理
.el-message {
  top: 10%;
  margin-top: -23px;
}
.el-dropdown-menu {
  height: 250px !important;
  overflow: auto !important;
  //top: 265px !important;
}
